<script setup>
import { useUserStore } from '@/stores/modules/user'

const userStore = useUserStore()
</script>

<template>
  <el-container class="common-layout">
    <el-header class="header">
      <div class="logo"></div>
      <div class="right" v-if="userStore.userInfo.token === ''">
        <router-link class="nav-text" to="/login">请先登录</router-link>
        <el-divider direction="vertical" style="border-left-color: #c0c0c0" />
        <router-link class="nav-text" to="/login">帮助中心</router-link>
        <el-divider direction="vertical" style="border-left-color: #c0c0c0" />
        <router-link class="nav-text" to="/login">关于我们</router-link>
      </div>
      <div v-else>
        <router-link to="/">进入首页>></router-link>
      </div>
    </el-header>
  </el-container>
</template>

<style scoped>
.common-layout {
  height: 80px;

  .header {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .right {
      display: inline-block;
    }

    .logo {
      width: 180px;
      height: 80px;
      background-image: url('../../../assets/logo.png');
      background-size: 100%;
      background-repeat: no-repeat;
    }
  }

  .nav-text {
    color: black;
    font-size: 12px;
  }
}
</style>
